<template>
  <view class="config-selection-container">
    <view class="header">
      <text class="title">请选择配置类型</text>
    </view>
    <!-- 主要内容 -->
    <view class="main-content">
      <!-- <view class="description">
        <text class="description-text">请选择配置类型</text>
      </view> -->

      <!-- 配置选项 -->
      <view class="config-options">
        <button class="config-btn primary" @click="handleInstallConfig">
          安装配置
        </button>

        <button class="config-btn secondary" @click="handleCommonConfig">
          常用配置
        </button>
      </view>

      <!-- 解绑按钮 -->
      <button class="unbind-btn" @click="handleUnbind">解绑设备</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { bluetoothManager, buildPacket } from "@/utils";
import { onUnload } from "@dcloudio/uni-app";

const handleInstallConfig = () => {
  uni.navigateTo({
    url: `/pages/install-config/install-config`,
  });
};

const handleCommonConfig = () => {
  uni.navigateTo({
    url: `/pages/common-config/common-config`,
  });
};

const handleUnbind = () => {
  uni.showModal({
    title: "确认解绑",
    content: "确定要解绑设备吗？",
    success: async (res) => {
      if (res.confirm) {
        // 清除存储的设备信息
        uni.removeStorageSync("openId");
        const packet = buildPacket(0x07, [0x01]);
        await bluetoothManager.sendPacket(
          bluetoothManager.serviceId,
          bluetoothManager.characteristicId,
          packet
        );
        bluetoothManager.closeBLEConnection().then(() => {
          uni.reLaunch({
            url: "/pages/search-device/search-device",
          });
        });

        // 显示成功提示
        uni.showToast({
          title: "设备已解绑",
          icon: "success",
        });
      }
    },
  });
};
onUnload(() => {
  bluetoothManager.offBLECharacteristicValueChange();
  bluetoothManager.closeBLEConnection();
});
</script>

<style scoped>
.config-selection-container {
  min-height: 100vh;
  padding: 24rpx;
  box-sizing: border-box;
  background: linear-gradient(to bottom, #e6ebff, #f8faff, #ffffff);
  padding-top: calc(env(safe-area-inset-top) + 24rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx);
  padding-left: calc(env(safe-area-inset-left) + 24rpx);
  padding-right: calc(env(safe-area-inset-right) + 24rpx);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 48rpx;
}

.back-btn {
  background: none;
  border: none;
  padding: 16rpx;
  color: #2c3045;
  font-size: 40rpx;
  transition: color 0.3s ease;
}

.back-btn:hover {
  color: #666;
}

.back-icon {
  font-size: 40rpx;
}

.title {
  color: #2c3045;
  font-size: 32rpx;
  font-weight: bold;
}

.placeholder {
  width: 80rpx;
}

.main-content {
  display: flex;
  flex-direction: column;
  gap: 32rpx;
}

.description {
  text-align: center;
  margin-bottom: 20rpx;
}

.description-text {
  color: #2c3045;
  font-size: 28rpx;
}

.config-options {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.config-btn {
  width: 100%;
  padding: 32rpx 24rpx;
  border-radius: 16rpx;
  font-size: 28rpx;
  font-weight: 500;
  border: none;
  box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.config-btn:hover {
  transform: translateY(-2rpx);
  box-shadow: 0 12rpx 24rpx rgba(0, 0, 0, 0.15);
}

.config-btn.primary {
  background-color: #2c3045;
  color: white;
}

.config-btn.secondary {
  background-color: #ecedf4;
  color: #2c3045;
}

.unbind-btn {
  width: 100%;
  padding: 16rpx 24rpx;
  border: 1rpx solid #ddd;
  color: #666;
  font-size: 24rpx;
  font-weight: 500;
  background-color: transparent;
  margin-top: 48rpx;
  transition: all 0.3s ease;
}

.unbind-btn:hover {
  background-color: #f5f5f5;
}
</style>
